<template>
	<view>
		<view class="flex flex-column bg-white p-4" style="border-bottom: 4rpx solid #eee;width: 2000rpx;">
			<view class="flex align-center mt-1" style="width: 60%;justify-content: space-around;">
				<view v-for="(item,index) in RightTopNav" :key="index" @click="select(index)"
					:class="active==index?'active':''" class="pb-2 px-2">
					<text class="font-weight-bold font-lg">{{item.name}}</text>
					<text class="font-weight-bold font-lg" style="color: red;"> {{item.num}}</text>
				</view>
			</view>
			<!-- 交易日期 -->
			<view class="flex py-3 px-2">
				<view class="flex align-center mr-4">
					<text class="mr-1">交易开始日期:</text>
					<view style="width: 500rpx;">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
					</view>
				</view>
				<view class="flex align-center">
					<text class="mr-1">交易结束日期:</text>
					<view style="width: 500rpx;">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
					</view>
				</view>
			</view>
			<!-- 合同搜索 -->
			<view class="px-2 flex">
				<view class="mr-2" style="width: 30%;">
					<uni-data-select placeholder="请选择要搜索的编号" v-model="Selectvalue" :localdata="range"
						@change="change"></uni-data-select>
				</view>
				<view class="flex justify-between align-center pl-1"
					style="border: 2rpx solid rgb(221,221,211);width: 40%;">
					<input style="width: 80%;" type="text" placeholder-class="p-1 font-sm">
					<view class="bg-orange text-white font-sm flex justify-center align-center px-3"
						style="height: 60rpx;cursor: pointer;">
						合同搜索
					</view>
				</view>
			</view>
			<!-- 表格 -->
			<view class="mt-2 flex flex-column">
				<view class="w-100 flex font-sm font-weight-bold"
					style="background-color: rgb(245,245,245);height: 80rpx;">
					<view class="text-center" style="width: 25%;line-height: 80rpx;">
						<text>商品信息</text>
					</view>
					<view class=" text-center" style="width: 25%;line-height: 80rpx;">
						<text>商品价格</text>
					</view>
					<view class=" text-center" style="width: 16%;line-height: 80rpx;">
						<text>交易数量</text>
					</view>
					<view class=" text-center" style="width: 16%;line-height: 80rpx;">
						<text>交易状态</text>
					</view>
					<view class=" text-center" style="width: 18%;line-height: 80rpx;">
						<text>交易操作</text>
					</view>
				</view>
				<view v-if="true" style="height: 200rpx;" class="w-100 flex justify-center align-center">
					暂无数据
				</view>
				<view v-else class="flex font-sm" style="height: 150rpx;border-bottom:2rpx solid rgb(221,221,211);"
					v-for="(item,index) in 4" :key="index">
					<view class=" flex justify-center align-center" style="width: 25%;line-height: 70rpx;">
						<image style="width: 100rpx;" src="../../static/muer.jpg" mode="widthFix"></image>
						<text>中粮贸易南良流通货</text>
					</view>
					<view class="flex align-center justify-center" style="width: 25%;line-height: 70rpx;">
						<view class="flex justify-center">
							<text class="text-orange">￥5252</text>
							<text> / 吨</text>
						</view>
					</view>
					<view class="flex align-center justify-center" style="width: 16%;line-height: 70rpx;">
						<view class="flex justify-center">
							<text class="text-orange">100</text>
							<text>吨</text>
						</view>
					</view>
					<view class="flex align-center justify-center" style="width: 16%;line-height: 70rpx;">
						<text class="text-orange">已完成</text>
					</view>
					<view class="flex align-center justify-center" style="width: 18%;line-height: 70rpx;">
						<button class="font-sm bg-success text-white flex justify-center align-center"
							style="white-space: nowrap; width: 100rpx;height: 100rpx;">查看</button>
						<button class="font-sm bg-danger text-white flex justify-center align-center"
							style="white-space: nowrap;width: 100rpx;height: 100rpx;">删除</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 空盒子占位 -->
		<!-- <view class="bg-light" style="height: 300rpx;">
	    	
	    </view> -->
	</view>
</template>

<script>
	export default {
		name: "PurchaseSaleOrders",
		data() {
			return {
				single: '',
				Selectvalue: "",
				RightTopNav: [{
						name: '所有交易',
						num: 0,
					},
					{
						name: '待交收',
						num: 0,
					},
					{
						name: '交易待关闭',
						num: 0,
					},
					{
						name: '发票未完成',
						num: 0,
					},
					{
						name: '合同完成',
						num: 0,
					},
				],
				range: [{
						value: 0,
						text: "合同号"
					},
					{
						value: 1,
						text: "运单号"
					},
					{
						value: 2,
						text: "对方客户名称"
					},
					{
						value: 3,
						text: "订单量"
					},
					{
						value: 4,
						text: "品种名称"
					},
					{
						value: 5,
						text: "业务相关筛选"
					},
					{
						value: 6,
						text: "可行性编号"
					},
				],
				active: 0,
			};
		},
		methods: {
			select(i) {
				this.active = i
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			change(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss">
	.active {
		color: #f00;
		border-bottom-color: #f00;
		border-bottom-width: 6rpx;
		border-bottom-style: solid;
	}
</style>